<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生成语数相关</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/p2.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #000000;
        }
    </style>
</head>
<body>
    <script>
        var moonjs = new MoonJs();
        var canvas=moonjs.createCanvasByMobile();
        moonjs.init(canvas)
        moonjs.start();//开始渲染

        var canvasColor='#333333';
        canvas.style.backgroundColor=canvasColor;

        const cc='F6'
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();

        var urls=['createTian.html','createCalc.html','hzToPy.html','hzToPy2.html','createPY.html','createCalc2.html','kpyxhz.html','fullPinyin.html','fullPinyin2.html','fullPinyin3.html','fullPinyin31.html','createGameDemo.html'];
        var letters=['创建田字格','创建计算题','汉字转拼音1','汉字转拼音2','生成拼音','创建计算题2','看拼音写汉字','全屏拼音','全屏拼音2','全屏拼音3','全屏拼音31','计算类游戏'];
       
        var colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9]);
        var [width,height]=[canvas.width,canvas.height];
        var [wid,hei,g]=[width,width/(letters.length-2),2];
        var [cx,cy]=[wid/2,hei/2+wid];
        let codes=[];
        let state=0;
        let fontSize=20;
        let maps=[];
        if(Unify.isMobile()) fontSize=50;

        
        let showLabel=moonjs.createRectText(' ',width,wid,'#fff',canvasColor);
        showLabel.childs[0].setFont(`${fontSize}px Arial`);
        showLabel.setXY(width/2,wid);
        
        let lightColors=['#000000','#ffffff']
        let lightRect=moonjs.createRect(width,height,lightColors[0],width*3);

        createMap();
        function createMap(){
            let y=0;
            for(let i=0;i<letters.length;i++){
                let name=letters[i];
                let color=colors[Math.floor(i%colors.length)];
                let rect=moonjs.createRectText(name,wid,hei,'#fff',color,'roundRect');
                rect.name=name;
                rect.index=i;
                rect.childs[0].setFont(`${fontSize}px Arial`);
                moonjs.mouseTouch(rect,mouseDown);
                maps.push(rect);
            }
            Unify.displayRank(maps,1,10,10,wid/2,hei);
        }
        function mouseDown(o){
            synth.triggerAttackRelease("E4", "8n")
            let index=o.index;
            window.open(urls[index]);
        }

    </script>
</body>
</html>
